<template>
    <div ref="container">
        <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading"
            :getContainer="() => $refs.container" :maskStyle="{ top: '93px', left: '154px' }" :mask="isDesktop()"
            :maskClosable="false" @ok="handleOk" @cancel="handleCancel" cancelText="关闭" style="top: 5%; height: 85%">
            <template slot="footer">
                <a-button key="back" v-if="isReadOnly" @click="handleCancel"> 关闭 </a-button>
            </template>
            <a-spin :spinning="confirmLoading">
                <a-form-model :model="form" ref="ruleForm" :rules="rules" id="distributionModal">
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作" prop="handle">
                        <a-radio-group v-model="form.handle">
                            <a-radio value="0">
                                全选
                            </a-radio>
                            <a-radio value="1">
                                全不选
                            </a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门店" prop="tenantIds">
                        <a-select placeholder="请选择门店" v-model="form.tenantIds" mode="multiple" :maxTagCount="8"
                            :dropdownMatchSelectWidth="false">
                            <a-select-option v-for="(item, index) in tenantList" :key="item.tenantId"
                                :value="item.tenantId">
                                {{ item.remark }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import pick from 'lodash.pick'
import Vue from 'vue'
import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
import JDate from '@/components/jeecg/JDate'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, putAction } from '@/api/manage'
import { autoJumpNextInput } from '@/utils/util'
import { mixinDevice } from '@/utils/mixin'
import JImageUpload from '../../../components/jeecg/JImageUpload'
import { USER_INFO } from '@/store/mutation-types'
export default {
    name: 'DistributionModal',
    mixins: [mixinDevice],
    components: {
        JImageUpload,
        JSelectPosition,
        JDate,
    },
    data() {
        return {
            title: '操作',
            visible: false,
            modalWidth: 800,
            drawerWidth: 700,
            orgaTree: [],
            departmentList: [],
            userList: [],
            roleList: [],
            tenantList: [],
            userId: '', //保存用户id
            isReadOnly: false,
            disableSubmit: false,
            dateFormat: 'YYYY-MM-DD',
            rules: {
                tenantIds: [
                    {
                        required: true,
                        message: '请选择门店!',
                        trigger: 'change',
                    },
                ],
            },
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 21 },
            },
            uploadLoading: false,
            confirmLoading: false,
            headers: {},
            form: {
                tenantIds: [],
                mIds: [],
                handle: '',
            },

            isRoleIdHead: false,
        }
    },
    watch: {
        'form.handle': {
            handler: function (val, oldVal) {
                if (this.visible) {
                    if (val == '0') {
                        this.form.tenantIds = this.tenantList.map((item) => item.tenantId)
                    } else {
                        this.form.tenantIds = []
                    }
                }
            },
            immediate: true,
        },
    },
    created() {
        const token = Vue.ls.get(ACCESS_TOKEN)
        this.headers = { 'X-Access-Token': token }
    },
    methods: {
        add(record = {}) {
            this.edit(record)
        },
        edit(record) {
            this.form.mIds = record.mIds
            this.loadTenantData()
            this.visible = true
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields()
                autoJumpNextInput('distributionModal')
            })
        },
        close() {
            this.$emit('close')
            this.visible = false
            this.disableSubmit = false
        },
        handleOk() {
            const that = this
            // 触发表单验证
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    that.confirmLoading = true
                    postAction('/material/materialAllocation', this.form)
                        .then((res) => {
                            if (res.code === 200) {
                                that.close()
                                that.$message.success(res.msg)
                            } else {
                                that.$message.warning(res.msg)
                            }
                        })
                        .finally(() => {
                            that.confirmLoading = false
                        })
                }
            })
        },
        handleCancel() {
            this.close()
        },
        async loadTenantData() {
            let res = await getAction('/tenant/getTenantList')
            let beforeTenantList = res.data || []
            this.tenantList = beforeTenantList.filter(
                (item) => item.tenantId != Vue.ls.get(USER_INFO).headOfficeTenantId
            )
        },
    },
}
</script>

<style scoped>
</style>